<template>
  <div v-if="Image" id="box">
    <Back :title="$t('ImageContent_imageDetail')" style="margin-bottom: 30px"></Back>
    <div class="from tagbox">
      <div class="title">
         {{$t('ImageContent_imageDetail')}}
<!--        镜像标签-->
      </div>
      <div v-for="item in Image.RepoTags" :key="item" style="margin: 5px 0px; flex-shrink: 0;">
        <el-button-group class="btnmargin">
          <el-button size="small" type="info" plain disabled>{{ item }}</el-button>
          <el-button size="small" style="background: #067FB5; color: #fff;" icon="el-icon-download" @click="pullImage(item)">拉取</el-button>
          <el-popover
            placement="right"
            width="400"
            trigger="click">
            <el-form ref="form" :model="form" size="mini" label-width="80px">
              <el-form-item :label=" $t('ImageContent_pushRepository')">
                <el-select v-model="form.index" placeholder=" $t('ImageContent_plsSelectRepository')" v-if="hubData&&hubData.length > 0">
                  <!-- <el-option label="DockerHub" value="https://index.docker.io/v1/"></el-option> -->
                  <el-option :label="item.name" :value="index" v-for="(item, index) in hubData" :key="item.name"></el-option>
                </el-select>
                <div v-else>
                  {{ $t('ImageContent_plsRegisterThenPush')}}
                </div>
              </el-form-item>
              <el-form-item>
                <el-button style="background: #067FB5; color: #fff;" @click="pushImage(item)" :disabled="hubData&&hubData.length === 0"> {{$t('ImageContent_pushImmediately')}}</el-button>
              </el-form-item>
            </el-form>
            <el-button slot="reference" size="small" style="background: #067FB5; color: #fff;" icon="el-icon-upload2">{{ $t('ImageContent_push')}}</el-button>
          </el-popover>
        </el-button-group>
        <el-button-group>
          <el-button size="small" type="danger" icon="el-icon-delete" @click="delImageTag(item)"> {{ $t('ImageContent_deleteLabel')}} </el-button>
        </el-button-group>
      </div>
    </div>
    <ImageTag :Image="Image" @success="fetchImage"></ImageTag>
    <ImageInfo :Image="Image"></ImageInfo>
    <ImageDockerInfo :Image="Image"></ImageDockerInfo>
    <ImageLayer :Image="Image"></ImageLayer>
  </div>
  <div v-else>
      {{ $t('ImageContent_networkError')}}!
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Select, Option, Input, Button, Popover, Table, TableColumn, Pagination, ButtonGroup } from 'element-ui'
import Back from '@/components/Back'
import ImageTag from '@/components/imageContent/ImageTag'
import ImageInfo from '@/components/imageContent/ImageInfo'
import ImageDockerInfo from '@/components/imageContent/ImageDockerInfo'
import ImageLayer from '@/components/imageContent/ImageLayer'
import post from '@/utils/post'
import http from '@/utils/http'
import { Base64 } from 'js-base64'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Select)
Vue.use(Input)
Vue.use(Option)
Vue.use(Button)
Vue.use(Popover)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Pagination)
Vue.use(ButtonGroup)

export default {
  data () {
    return {
      Image: null,
      hubData: [],
      form: {
        index: ''
      }
    }
  },
  mounted () {
    this.fetchImage()
    http({
      url: '/hubfind',
      method: 'GET',
      timeout: 2000000
    }).then(res => {
      this.hubData = res.data
    }).catch((err) => {
      return err
    })
  },
  methods: {
    // 推送镜像
    pushImage (tag) {
      console.log(tag)
      if(!this.hubData)return this.$message.error('请先在登记中添加账户')
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const pushdata = this.hubData[this.form.index]
      
      const data = {
        username: pushdata.username,
        password: Base64.decode(pushdata.password),
        serveraddress: pushdata.url
      }
      const token = Base64.encode(JSON.stringify(data))
      // const docker = `curl --unix-socket /var/run/docker.sock -s -H "Content-Type:X-Registry-Auth" -d '${JSON.stringify(data)}' -X POST "http:/v1.40/images/${tag.split(':')[0]}/push?tag=${tag.split(':')[1]}"`
      const docker = `curl --unix-socket /var/run/docker.sock -s -H "X-Registry-Auth: ${token}" -X POST "http:/v1.40/images/${tag.split(':')[0]}/push?tag=${tag.split(':')[1]}"`
      http({
        url: '/docker',
        method: 'POST',
        timeout: 2000000000,
        data: {
          docker
        }
      }).then(res => {
        this.loading.close()
        document.getElementById('box').click()
        if (res.Data.indexOf('Size') !== -1 && res.Data.indexOf('Tag') !== -1) {
          this.$message({
            showClose: true,
            message: this.$t('ImageContent_pushSuccess'),
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: this.$t('ImageContent_pushFailPlsTryLater'),
            type: 'error'
          })
        }
      }).catch((err) => {
        return err
      })
    },
    // 拉取镜像
    pullImage (tag) {
      const docker = `curl --unix-socket /var/run/docker.sock -s -X POST "http:/v1.40/images/create?fromImage=${tag}"` // 拉取镜像
      http({
        url: '/docker',
        method: 'POST',
        timeout: 600000000,
        data: { docker }
      }).then(res => {
        if (res.Code !== 200) {
          return this.$message({
            showClose: true,
            message:  this.$t('ImageContent_pullFail'),
            type: 'error'
          })
        }
        this.$message({
          showClose: true,
          message:  this.$t('ImageContent_pullSuccess'),
          type: 'success'
        })
        this.fetchImage()
      })
    },
    // 删除镜像标签
    delImageTag (tag) {
      const docker = `curl --unix-socket /var/run/docker.sock -s -X DELETE "http:/v1.40/images/${tag}"` // 删除镜像标签
      post({ docker }, res => {
        if (res.message) {
          return this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
        this.$message({
          showClose: true,
          message:  this.$t('ImageContent_deleteSuccess'),
          type: 'success'
        })
        this.fetchImage()
      }, this)
    },
    // 请求镜像信息
    fetchImage () {
      const imageId = this.$route.params.id
      const docker = `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/images/${imageId}/json"`
      post({ docker }, res => {
        if (res.message) {
          this.Image = null
        } else {
          this.Image = res
          // console.log(this.Image)
        }
      }, this)
    }
  },
  components: {
    Back,
    ImageTag,
    ImageInfo,
    ImageDockerInfo,
    ImageLayer
  }
}
</script>

<style lang="scss" scoped>
.btnmargin{
  margin: 0px 25px;
}
.tagbox{
  display: flex;
  flex-wrap: wrap;
}
</style>
